<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>简易文件资源管理器</title>
  <style>
    /* 页面整体样式 */
    body { font-family: Arial, sans-serif; margin: 0; padding: 20px; }
    h1 { text-align: center; color: #333; }
    .container { width: 80%; margin: 0 auto; }

    /* 返回按钮样式 */
    #back-btn { 
      display: none; /* 默认隐藏，进入文件夹后显示 */
      margin: 0 auto 20px; 
      padding: 6px 12px; 
      border: 1px solid #ccc; 
      border-radius: 4px; 
      cursor: pointer; 
      background-color: #f5f5f5;
    }
    #back-btn:hover { background-color: #eee; }

    /* 路径显示样式 */
    #path-display { 
      text-align: center; 
      margin: 10px 0; 
      color: #666; 
      font-size: 14px;
    }
    .path-item { 
      cursor: pointer; 
      color: #0066cc; 
    }
    .path-item:hover { text-decoration: underline; }

    /* 表格样式 */
    table { 
      border-collapse: collapse; 
      width: 100%; 
      margin: 10px 0; 
      border: 1px solid #ccc;
    }
    th, td { 
      border: 1px solid #ccc; 
      padding: 10px; 
      text-align: center; 
    }
    th { 
      background-color: #f5f5f5; 
      color: #333; 
    }

    /* 文件名和删除按钮样式 */
    .file-name { 
      color: #0066cc; 
      cursor: pointer; 
      text-decoration: underline; 
    }
    .delete-btn { 
      color: #ff4444; 
      cursor: pointer; 
      text-decoration: underline; 
    }

    /* 文件内容显示区域样式 */
    #content-display { 
      width: 100%; 
      margin: 20px 0; 
      padding: 15px; 
      border: 1px solid #ccc; 
      border-radius: 4px; 
      min-height: 50px; 
      background-color: #fafafa;
    }
    #content-display h3 { margin-top: 0; color: #333; }
    #content-display p { color: #666; line-height: 1.6; }
  </style>
  <!-- 引入jQuery（CDN方式，无需本地下载） -->
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
  <div class="container">
    <h1>简易文件资源管理器</h1>
    <!-- 返回上一级按钮 -->
    <button id="back-btn" onclick="goBack()">返回上一级</button>
    <!-- 路径显示区域（如：根目录 > 书籍） -->
    <div id="path-display"></div>
    <!-- 文件列表表格 -->
    <table>
      <thead>
        <tr>
          <th>文件名</th>
          <th>类型</th>
          <th>大小</th>
          <th>修改时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="file-table-body">
        <!-- 前端JS动态渲染表格内容 -->
      </tbody>
    </table>
    <!-- 文件内容显示区域 -->
    <div id="content-display"></div>
  </div>

  <script>
    // 记录当前路径（如：["根目录", "电影", "喜剧片"]），用于路径显示和返回上一级
    let currentPath = ["根目录"];
    // 记录当前所在文件夹（根目录为null，子文件夹为文件夹名，如"书籍"）
    let currentFolder = null;

    // 页面加载完成后，自动获取根目录文件列表
    $(document).ready(function() {
      getFileList();
    });

    // 1. 获取文件列表（根目录或指定文件夹）
    function getFileList() {
      let requestUrl = '';
      // 若当前在根目录，请求/getlist；若在子文件夹，请求/getFolderList
      if (!currentFolder) {
        requestUrl = 'http://localhost:8081/getlist';
      } else {
        requestUrl = `http://localhost:8081/getFolderList?folderName=${encodeURIComponent(currentFolder)}`;
      }

      $.ajax({
        url: requestUrl,
        type: 'GET',
        dataType: 'json',
        success: function(res) {
          // 清空表格和文件内容区域
          $('#file-table-body').empty();
          $('#content-display').empty();
          // 更新路径显示
          updatePathDisplay();
          // 动态拼接表格行
          let tableHtml = '';
          $.each(res, function(index, item) {
            const typeText = item.fileType === 'folder' ? '文件夹' : '文件';
            tableHtml += `
              <tr>
                <td>
                  <span class="file-name" 
                        data-type="${item.fileType}" 
                        data-name="${item.fileName}">
                    ${item.fileName}
                  </span>
                </td>
                <td>${typeText}</td>
                <td>${item.fileSize}</td>
                <td>${item.fileTime}</td>
                <td>
                  <span class="delete-btn" 
                        data-name="${item.fileName}">
                    删除
                  </span>
                </td>
              </tr>
            `;
          });
          // 插入表格内容
          $('#file-table-body').html(tableHtml);
          // 绑定删除按钮点击事件
          bindDeleteEvent();
          // 绑定文件名点击事件
          bindFileNameEvent();
        },
        error: function(err) {
          alert(`获取文件列表失败：${err.responseText}`);
        }
      });
    }

    // 2. 绑定删除按钮点击事件
    function bindDeleteEvent() {
      $('.delete-btn').on('click', function() {
        const fileName = $(this).data('name');
        // 确认删除
        if (!confirm(`确定要删除“${fileName}”吗？`)) {
          return;
        }
        // 发起删除请求
        let deleteUrl = `http://localhost:8081/delete?fileName=${encodeURIComponent(fileName)}`;
        // 若当前在子文件夹，需携带文件夹名参数
        if (currentFolder) {
          deleteUrl += `&folderName=${encodeURIComponent(currentFolder)}`;
        }

        $.ajax({
          url: deleteUrl,
          type: 'GET',
          dataType: 'json',
          success: function(res) {
            alert(res.message);
            // 重新获取文件列表，刷新页面
            getFileList();
          },
          error: function(err) {
            alert(`删除失败：${err.responseText}`);
          }
        });
      });
    }

    // 3. 绑定文件名点击事件（区分文件/文件夹）
    function bindFileNameEvent() {
      $('.file-name').on('click', function() {
        const fileType = $(this).data('type');
        const fileName = $(this).data('name');

        if (fileType === 'file') {
          // 点击的是文件：获取并显示文件内容
          getFileContent(fileName);
        } else if (fileType === 'folder') {
          // 点击的是文件夹：进入文件夹，更新路径和当前文件夹
          currentPath.push(fileName);
          currentFolder = fileName;
          // 显示返回按钮
          $('#back-btn').show();
          // 获取文件夹内列表
          getFileList();
        }
      });
    }

    // 4. 获取文件内容并显示
    function getFileContent(fileName) {
      $.ajax({
        url: `http://localhost:8081/getFileContent?fileName=${encodeURIComponent(fileName)}`,
        type: 'GET',
        dataType: 'json',
        success: function(res) {
          const contentHtml = `
            <h3>文件“${fileName}”的内容：</h3>
            <p>${res.content}</p>
          `;
          $('#content-display').html(contentHtml);
        },
        error: function(err) {
          alert(`获取文件内容失败：${err.responseText}`);
        }
      });
    }

    // 5. 更新路径显示（如：根目录 > 电影 > 喜剧片）
    function updatePathDisplay() {
      let pathHtml = '';
      $.each(currentPath, function(index, pathItem) {
        if (index === 0) {
          // 根目录：直接显示，无分隔符
          pathHtml += `<span class="path-item" data-index="${index}">${pathItem}</span>`;
        } else {
          // 子路径：添加分隔符
          pathHtml += ` > <span class="path-item" data-index="${index}">${pathItem}</span>`;
        }
      });
      $('#path-display').html(pathHtml);
      // 绑定路径点击事件（点击路径跳转回对应层级）
      bindPathEvent();
    }

    // 6. 绑定路径点击事件（跳转回对应层级）
    function bindPathEvent() {
      $('.path-item').on('click', function() {
        const targetIndex = $(this).data('index');
        // 若点击的是当前层级，不处理
        if (targetIndex === currentPath.length - 1) {
          return;
        }
        // 更新路径（截取到目标层级）
        currentPath = currentPath.slice(0, targetIndex + 1);
        // 更新当前文件夹（若目标层级是根目录，currentFolder为null；否则为最后一个路径项）
        currentFolder = targetIndex === 0 ? null : currentPath[currentPath.length - 1];
        // 若回到根目录，隐藏返回按钮
        if (targetIndex === 0) {
          $('#back-btn').hide();
        }
        // 重新获取文件列表
        getFileList();
      });
    }

    // 7. 返回上一级文件夹
    function goBack() {
      // 若当前在根目录，无法返回
      if (currentPath.length <= 1) {
        alert('已在根目录，无法返回上一级');
        return;
      }
      // 移除最后一个路径项
      currentPath.pop();
      // 更新当前文件夹（若回到根目录，为null；否则为最后一个路径项）
      currentFolder = currentPath.length === 1 ? null : currentPath[currentPath.length - 1];
      // 若回到根目录，隐藏返回按钮
      if (currentPath.length === 1) {
        $('#back-btn').hide();
      }
      // 重新获取文件列表
      getFileList();
    }
  </script>
</body>
</html>